<!DOCTYPE HTML>
<html>

    <head>
    
        <meta charset="utf-8">
        <link rel="shortcut icon" href="<?php echo URL; ?>public/monster-logo-small.ico"/>
        <link rel="icon" href="<?php echo URL; ?>public/monster-logo-small.ico"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        
        <title>Monitoring SPAN - Login</title>
        
        <!-- JQuery & Bootstrap JS -->
        <script src="<?php echo URL; ?>public/JQuery/jquery-2.1.1.min.js"></script>
        <script src="<?php echo URL; ?>public/Bootstrap/js/bootstrap.min.js"></script>
        
        <!-- Bootstrap CSS -->
        <link href="<?php echo URL; ?>public/Bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="<?php echo URL; ?>public/font/awesome/css/font-awesome.min.css" rel="stylesheet">
        
        <!-- Application CSS -->
        <link href="<?php echo URL; ?>public/monster.css" rel="stylesheet">
    
    </head>
    
    
    <body>
        
        <div class="container" id="login-container">
            <!--div class="row" align="center"><img src="<?php echo URL; ?>public/span-logo.png"></div-->            
            <!--div>
                <marquee title="Pengumuman"
                    ONMOUSEOVER="this.stop();"
                    ONMOUSEOUT="this.start();" bgcolor="black"><font color="yellow">
                    <H3>Pengumuman : </H3>
                     <P><b>Kepada user SPAN di Kanwil, KPPN, BA 999 (DJKN, DJPPR, Kantor Pusat DJPBN, DJPK), <br/>bahwa SPAN akan di matikan pada hari Minggu 9 Agustus 2015 mulai jam 05.00 WIB - 17.00 WIB untuk keperluan system maintenance. <br/>Mohon untuk tidak melakukan akses pada hari tersebut.</b></P>
                </MARQUEE>
            </div-->
                
                
            <div class="row" style="margin-top: 50px">
                <div id="market-watch-ticker" class="main-window-segment sub-segment" style="background: #333; color: #fff; overflow-x: hidden; font-size: 1.2em; font-weight: bold;">
    </div>        
                <div class="col-lg-6 col-md-12 hidden-sm hidden-xs">
                    <br><img src="<?php echo URL; ?>public/img/cover.png">
                </div>
                <div class="col-lg-1"></div>
            
                <div class="col-lg-5" align='center'>
                    <h1><img src="<?php echo URL; ?>public/monster-logo-small.png"> Online Monitoring SPAN</h1> <p style='font-size: 120%'>Aplikasi berbasis web yang digunakan oleh Kementerian/Lembaga, Eselon I,
                    Satuan Kerja, KPPN, Kantor Wilayah dan Unit lain di Kementerian Keuangan dalam rangka monitoring transaksi keuangan negara melalui SPAN. </p>
                    
                    <form id="login-form" action="<?php echo URL; ?>auth/login" method="post">

                        <!--div class="panel panel-default glow-span-blue"-->

                            <!--div class="panel-heading" style="text-align: center"><h4>LOGIN&nbsp;&nbsp;<span style="font-size: 18px; position: relative; top: 2px;">
                    </div-->
                        

                            <div class="panel-body">

                                <?php
                                    if (isset($this->error)) {
                                        echo '<div class="alert alert-danger" id="notfound">' . $this->error . '</div>';
                                    }
                                ?>

                                <p>
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span><input type="text" class="form-control" name="user" id="nuser" placeholder="Nama Pengguna">
                                    </div>
                                    <div class="alert alert-warning" id="wuser" style="display:none; margin-top: 10px;"></div>
                                </p>

                                <p>
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span><input class="form-control" name="pass" id="pass" type="password" placeholder="Kata Sandi">
                                    </div>
                                    <div class="alert alert-warning" id="wpass" style="display:none; margin-top: 10px;"></div>
                                </p>

                                <p>
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                        <select class="form-control" type="text" name="ta" id="ta">
                                            <option value='2014'>2014</option>
                                            <option value='2015' selected>2015</option>
                                        </select>
                                    </div>
                                    <div class="alert alert-warning" id="wpass" style="display:none; margin-top: 10px;"></div>
                                </p>

                                <p><button type="submit" id="submit-login" class="btn btn-primary btn-block" >Masuk</button></p>

                            </div>

                        <!--/div-->
                
                    </form>
                    
                    <p style="text-align: center"><img src="<?php echo URL; ?>public/span-logo.png"> | <i class="fa fa-envelope"></i> <a href='mailto:servicedesk@depkeu.go.id'>servicedesk@depkeu.go.id</a></p>
                    
                </div>
                <!--div class="col-lg-3"></div-->
                
                <!--div class="col-lg-2 col-md-3"></div-->
                
            </div>
        
        </div>
    
    </body>

    <script type="text/javascript">
        
        function responsiveVerticalCenter() {
            heightCalculation = Math.round(($(window).innerHeight() - $('#login-container').outerHeight()) / 2) - Math.round($('#login-container').outerHeight() / 3);
            if (heightCalculation < 20) {
                heightCalculation = 20;
            }
            $('#login-container').css('margin-top', heightCalculation);
        }
        
        function checkValidity() {
            valid = 0;
            
            if ($('#pass').val() == '') {
                $('#wuser').html('Isikan kata sandi Anda.');
                $('#wuser').fadeIn();
            } else {
                valid++;
            }
            
            if ($('#nuser').val() == '') {
                $('#wuser').html('Isikan nama pengguna Anda.');
                $('#wuser').fadeIn();
            } else {
                valid++;
            }
            
            if (valid >= 2) {
                $('#login-form').submit();
            }
        }
        
        function checkNotFound() {
            
            var notfound = document.getElementById('notfound');
            
            $('#nuser').focus();
            $('#wuser').fadeOut();
            $('#wpass').fadeOut();
            
            $('#nuser').keyup(function() {
                if (notfound != null) {
                    $('#notfound').fadeOut();
                }
                if ($('#nuser').val() != '') {
                    $('#wuser').fadeOut();
                }
            });
            
            $('#pass').keyup(function() {
                if (notfound != null) {
                    $('#notfound').fadeOut();
                }
                if ($('#npass').val() != '') {
                    $('#wpass').fadeOut();
                }
            });
        }
        
        $(document).ready(function() {
            responsiveVerticalCenter();
            checkNotFound();
        });
        
        $(window).resize(function() {
            responsiveVerticalCenter();
        });
        
        $('#login-form').submit(function(event) {
            checkValidity();
            event.preventDefault();
        });


    </script>

</html>